<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:z="http://pd.softplan.com.br/zion/faces"
	template="/templates/zion-form.xhtml">

	<ui:define name="zion-form-contents">
		<h:outputStylesheet name="css/zion.highlight.css" target="head" />

		<div class="componentUsageExample">
			<h3>Impressão do valor formatado</h3>
			<span class="status success" />
			<z:cep id="cep0" value="#{cepForm.cep}" renderAsOutput="true" />

		</div>

		<div class="componentUsageExample">
			<h3>Básico</h3>
			<span class="status success" />
			<z:cep id="cep1" label="CEP" value="#{cepForm.cep}" />
		</div>

		<div class="componentUsageExample">
			<h3>
				Largura (
				<code>width</code>
				)
			</h3>
			<span class="status success" />
			<z:cep id="cep2" label="CEP" value="12345-78" width="10em" />
		</div>

		<div class="componentUsageExample">
			<h3>
				Desabilitado (
				<code>disabled</code>
				)
			</h3>
			<span class="status success" />
			<z:cep id="cep3" label="CEP" value="12345-78" width="10em"
				disabled="true" />
		</div>

		<div class="componentUsageExample">
			<h3>
				Obrigatório (
				<code>required</code>
				)
			</h3>
			<span class="status success" />
			<z:cep id="cep4" label="CEP" value="#{cepForm.cep}" width="10em"
				required="true" />
		</div>

		<div class="componentUsageExample">
			<h3>
				Somente-leitura (
				<code>readonly</code>
				)
			</h3>
			<span class="status success" />
			<z:cep id="cep5" label="CEP" value="#{cepForm.cep}" width="10em"
				readonly="true" />
		</div>

		<div class="componentUsageExample">
			<h3>
				Foco automático (
				<code>autofocus</code>
				)
			</h3>
			<span class="status success" />
			<z:cep id="cep6" label="CEP" value="#{cepForm.cep}" width="10em"
				autofocus="true" />
		</div>

		<div class="componentUsageExample">
			<h3>
				Classe de estilos (
				<code>styleClass</code>
				)
			</h3>
			<span class="status success" />
			<z:cep id="cep7" label="CEP" value="#{cepForm.cep}" width="10em"
				styleClass="especial texturizado" />
		</div>

		<frameset>
			<frame>
			<z:textarea renderAsOutput="true" value="#{cepForm.code}" />
			</frame>
		</frameset>
	</ui:define>
</ui:composition>